<template>
  <div class="tl-upload-container">
    <el-dialog :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" width="1200px" @open="open" @close="close" :append-to-body="true">
      <el-table header-row-class-name="history-table-header" row-class-name="history-table-row" class="tl-table" ref="mainTable" height="600" max-height="800" resizable-key="tableHeight" :resizable-refs="tableResizeRefs" v-loading="loading" :data="datas" @expand-change="expandChangeRow" @row-click="doRowClick" row-key="id" :row-style="{ height: '60px' }" :expand-row-keys="expandRowKeyArr">
        <el-table-column min-width="20px" align="right" type="expand">
          <template slot-scope="scopedata">
            <table-content :ref="'ref' + scopedata.row.id" :top-source-id="scopedata.row.id + ''" :top-source-type="topSourceType"></table-content>
          </template>
        </el-table-column>
        <el-table-column prop="version" label="版本号" width="300px"  align="center" header-align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-tag>版本: {{scope.row.version}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dispstate" label="审批状态" width="300px" sort-by="enabled" align="center" header-align="center">
          <template slot-scope="scope">
            <div class="icon-div-class" v-if="scope.row.state === 0"><svg-icon class="icon-class" icon-class="black"></svg-icon><div class="text-class-two" style="color: #666666;">{{scope.row.dispstate}}</div></div>
            <div class="icon-div-class" v-if="scope.row.state === 1"><svg-icon class="icon-class" icon-class="blue"></svg-icon><div class="text-class-three" style="color: #409EFF;">{{scope.row.dispstate}}</div></div>
            <div class="icon-div-class" v-if="scope.row.state === 2"><svg-icon class="icon-class" icon-class="red"></svg-icon><div class="text-class-two" style="color: rgba(217, 0, 27, 0.996078431372549);">{{scope.row.dispstate}}</div></div>
            <div class="icon-div-class" v-if="scope.row.state === 9"><svg-icon class="icon-class" icon-class="green"></svg-icon><div class="text-class-three" style="color: #67C23A;">{{scope.row.dispstate}}</div></div>
          </template>
        </el-table-column>
        <el-table-column prop="createon" label="创建时间" min-width="300px"  align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
      <!-- 列表分页 -->
      <el-row class="pagebar" ref="pager" style="height: 60px">
        <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
/** 子组件 */
import tableContent from "./tableContent"
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
  mixins: [mixin_list],
  components: { tableContent },
  data() {
    return {
      moduleTitle: '历史记录',
      urlPrefix: '/ltc/sdWfForm/',
      url: {
        // 额外的url
        list: ''
      },
      visible: false,
      title: '变更历史',
      isQueryOnCreated: false,
      // 排序参数
      sorterInfo: {
        sidx: 'version',
        sord: 'desc'
      },
      expandRowKeyArr: []
    }
  },
  props: {
    parentValue: {
      type: String,
      require: true
    },
    parentField: {
      type: String,
      require: true
    },
    tabledList: {
      type: String,
      require: true
    },
    topSourceType: {
      type: String,
      default: ""
    }
  },
  mounted() {
  },
  methods: {
    expandChangeRow(row, expand) {
      this.$nextTick(() => {
        for (let i = 0; i < expand.length; i++) {
          if (expand[i].id === row.id) {
            this.$refs['ref' + row.id].open()
          }
        }
      })
    },
    loaded() {
      // 页面加载完毕执行
    },
    open() {
      this.filtersInfo[this.parentField] = this.parentValue
      this.url.list = this.tabledList
      this.visible = true
      this.loadData({})
    },
    close() {
      this.expandRowKeyArr = []
    },
    /** 关闭 */
    doCancelEdit() {
      this.visible = false
    },
    openHistoryViewDialog(rowData) {
      this.$refs.historyView.sourceId = rowData.id
      this.$refs.historyView.sourceType = 'LtcContractWfForm'
      this.$refs.historyView.visible = true
    },
    openHistoryDialog() {
      this.visible = true
    },
    afterLoadData() {
    }
  }
}
</script>
<style lang="scss">
  .icon-class {
    height: 30px !important;
    width: 70px !important;
  }
  .icon-div-class {
    position: relative;
  }
  .text-class-three {
    position: absolute;
    left: 120px;
    top: 4px;
    font-family: '思源黑体 CN', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
  }

  .text-class-two {
    position: absolute;
    left: 126px;
    top: 4px;
    font-family: '思源黑体 CN', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
  }
</style>
<style lang="scss" scoped>
  /deep/ .history-table-header th {
      height: 60px !important;
      font-family: '思源黑体 CN Medium', '思源黑体 CN Regular', '思源黑体 CN', sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 16px;
      background-color: #ffffff;
      padding: 2px 0;
  }
  /deep/ .history-table-row td {
    font-family: '思源黑体 CN Medium', '思源黑体 CN Regular', '思源黑体 CN', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
  }
  /deep/ .el-table__body-wrapper {
    overflow: auto;
    position: relative;
    width: 105%;
  }
</style>

